<template>
<div class="counter-container">
<div class="counter">
        <button @click="add">+</button>
        <div>{{count}}</div>
        <button @click="minus">-</button>
    </div>
</div>
</template>

<script>
import mixin from '../store/mutationType'
export default {
    mixins:[mixin],
    data(){
        return{
            // count:1
        }
    },
    methods:{
        add(){
            // this.count++
            this.countadd()
        },
        minus(){
            // this.count--
            this.countminus()
        }
    },
    computed:{
        count(){
            return this.$store.state.count
        }
    }
    
}
</script>

<style scoped>
*{
    margin:0;
    padding:0;
}
.counter{
    display:inline-flex;
    width:200px;
    height:30px;
    border:1px solid black;
    justify-content:space-between;
    align-items: center;
}
.counter button{
    width:37px;
    height:30px;
}
</style>